<template>
  <div class="height100-detail">
    <location-link class="location-pos" positionWay="absolute" :cur="curIndex" :linkArr="linkArr"></location-link>
    <div class="page1-top bg000-opcity">
    </div>
    <div class="detail-content" v-if="detail">
      <p class="title">{{detail.title}}</p>
      <div class="publish">
        <span class="editor" v-show="detail.editor">编辑：{{detail.editor}}</span>
        <span class="publish1">{{detail.publish}}</span>
      </div>
      <div class="content" v-html="detail.content"></div>
    </div>
    <div class="location-bottom">
      <p>版权所有:{{nav.company.icp}}</p>
      <p>公司地址：{{nav.company.detail}}</p>
      <p>{{nav.company.copyright}} </p>
    </div>
  </div>
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'
  import request from 'src/util/request'
  import locationLink from 'src/views/location/location'

  export default {
    data () {
      return {
        loading: false,
        wrapperHeight: 0
      }
    },
    computed: {
      ...mapGetters([
        'detail',
        'nav'
      ]),
      linkArr () {
        let list = this.nav.menus[2].children
        list.forEach(item => {
          item.href = `/list/${item.code}`
        })
        return list
      },
      nowType () {
        return this.$route.params.type
      },
      curIndex () {
        return this.linkArr.findIndex(item => {
          return item.code === this.nowType
        })
      }
    },
    props: {

    },
    components: {
      locationLink
    },
    methods: {
      ...mapMutations({
        setArrowBtnState: 'SET_ARROW_BTN_STATE',
        setDetail: 'SET_detail',
        clearDetail: 'CLEAR_detail'
      })
    },
    beforeDestroy () {
      this.clearDetail()
    },
    created () {
      this.setArrowBtnState(false)
      request({
        url: `/api/wap/page/${this.$route.params.id}`
      })().then(data => {
        this.setDetail(data)
      })
    }
  }
</script>

<style lang="scss">
  .height100-detail {
  	position: relative;
  	background-color: #f5f5f5;
  	.location-bottom {
  		box-sizing: border-box;
  		padding-top: rem(32);
  		font-size: rem(26);
  		height: rem(200);
  		bottom: 0;
  		left: 0;
  		background-color: #474747;
  		color: #fff;
  		text-align: center;
  		line-height: rem(42);
  	}
  	.page1-top {
  		position: relative;
  		height: rem(410);
  		background: url('../list/img/list-page1-bg1.jpg') top center no-repeat;
  		background-size: cover;
  	}
  	.detail-content {
  		margin: rem(20) 0;
  		background-color: #fff;
  		.title {
  			font-weight: bold;
  			padding: rem(25) rem(50);
  			font-size: rem(38);
  			text-align: center;
  			color: #000;
  			line-height: rem(50);
  		}
  		.publish {
  			display: flex;
  			background: #ddd;
  			margin: rem(-8) 0 rem(25) 0;
  			padding: 0 rem(60);
  			font-size: rem(28);
  			line-height: rem(50);
  			height: rem(50);
  			.editor {
  				width: 40%;
  				text-align: center;
  			}
  			.publish1 {
  				flex: 1;
  				text-align: right;
  			}
  		}
  		.content {
  			padding: 0 rem(20) rem(30) rem(20);
  			font-size: rem(28);
  			line-height: rem(45);
  			text-indent: rem(56);
        img {
          margin-left: rem(-40);
        }
  			// white-space: nowrap;
  		}
      video {
        display: block;
        margin:  0 auto;
        max-width: 100%;
        width: rem(740);
        height: rem(408);
      }
  		img {
  			width: 90%;
  			height: auto !important;
  			margin: rem(25) 0;
  		}
  	}
  }
</style>
